<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload" addbtn @onAdd="onAdd"/>

    <el-drawer v-model="visible" direction="rtl" @close="form={}">
      <el-form label-width="80px">
        <el-form-item label="分类排序">
          <el-input placeholder="数字越大越靠前" v-model="form.sort" type="number"/>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input placeholder="请输入分类名字" v-model="form.name"/>
        </el-form-item>
        <el-form-item label="分类状态">
          <el-select placeholder="请选择分类状态" v-model="form.status">
            <el-option label="显示" :value="1"/>
            <el-option label="隐藏" :value="0"/>
          </el-select>
        </el-form-item>
        <el-form-item label="图标">
          <el-input placeholder="分类图片" v-model="form.thumb">
            <template #append>
              <el-button @click="handlerUpload">上传</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="visible=false">取消</el-button>
          <el-button type="primary" @click="handlerSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import TablePage from "@/components/TablePage";

export default {
  components: {TablePage},
  data() {
    return {
      query: [
        {
          type: 'text',
          label: '分类名',
          placeholder: '分类名搜索',
          key: 'name'
        },
        {
          type: 'select',
          label: '状态',
          placeholder: '分类状态',
          key: 'status',
          options: [
            {label: '显示', value: '1'},
            {label: '隐藏', value: '0'}
          ]
        }
      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },
        {
          label: '活动分类',
          prop: 'name',
          width: '180px'
        }, {
          label: '状态',
          prop: 'status',
          width: '120px',
          type: 'render',
          render: (data) => {
            if (data.status == 1)
              return `<span class="el-tag el-tag--dark mx-1 is-round"><span class="el-tag__content">正常</span></span>`
            else return `<span class="el-tag el-tag--danger el-tag--dark mx-1 is-round"><span class="el-tag__content">隐藏</span> </span>`
          }
        }, {
          label: '添加时间',
          type: 'date',
          width: '180px',
          prop: 'created',
        }, {
          label: '排序',
          width: '100px',
          prop: 'sort',
        }, {
          label: '操作',
          type: 'buttons',
          width: '180px',
          buttons: [
            {
              label: '修改',
              type: 'primary',
              styles: {},
              icon: 'Edit',
              callback: (data) => {
                this.visible = true;
                this.form = JSON.parse(JSON.stringify(data));
              }
            },
            {
              label: '删除',
              type: 'danger',
              styles: {},
              icon: 'Delete',
              callback: (data) => {
                this.handlerDelete(data)
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
      visible: false,
      form: {}
    }
  },

  methods: {
    onload(data) {
      console.log('加载新数据', data)
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['sort']
      })
      this.$api.apiQuery('/api/manage/activity-category/', data).then(res => {
        this.data.list = res.data;
        this.data.total = res.total;
      })
    },
    onAdd() {
      this.visible = true;
    },
    handlerUpload() {
      this.$store.dispatch('upload/show', (datas) => {
        this.form.thumb = datas[0].src;
      })
    },
    handlerSubmit() {
      this.$api.apiPost('/api/manage/activity-category/', this.form).then(() => {
        this.onload(this.data)
        this.visible = false;
      })
    },
    handlerDelete(data) {
      this.$api.apiDelete('/api/manage/activity-category/', data.id).then(() => {
        this.onload(this.data)
      })
    }
  }
}
</script>